<template>
	<view class="phonebookdetails">
		<view class="proDetail">
			<!-- 头像 -->
			<view class="user-section" :class="'bg-' + themeColor.name">
				<image class="bg" :src="user.header"></image>
				<!--#ifdef H5-->
				<!--h5直接上传头像-->
				<view class="portrait-box">
					<image class="portrait" :src="user.header"></image>
				</view>
				<!-- #endif -->
				<!--#ifndef H5-->
				<view class="portrait-box">
					<avatar canRotate="false" selWidth="200px" selHeight="400upx" :avatarSrc="user.header"
					 avatarStyle="width: 200upx; height: 200upx; border-radius: 100%; border: 6upx solid #fff;">
					</avatar>
				</view>
				<!-- #endif -->
			</view>
			<!-- <view style="width:100%;height:200rpx;background-color: #FFFFFF;">
				<image :src="user.header" style="display: block; width:200rpx;height:200rpx;margin:0rpx auto;border-radius: 100rpx;"></image>
			</view> -->
			<view class="item">
				<view class="title">姓名</view>
				<input type="text" v-model="user.name" class="content" placeholder="请输入姓名" :disabled="user.id!=0"/>
			</view>
			<view class="item">
				<picker mode="selector" :range="deps" :range-key="'name'" :value="deps[rangekey].name" @change="bindDepschange" style="width: 100%;" :disabled="user.id!=0">
					<view class="picker" style="display: flex;width: 100%;justify-content: space-between;">
						<text class="title">部门</text>
						<text class="content">{{ user.department.name || '请选择部门' }} <text class="iconfont iconxia" style="font-size: 14px;"></text></text>
					</view>
				</picker>
			</view>
			<view class="item">
				<picker mode="selector" :range="positions" :range-key="'name'" :value="positions[rangekey2].name" @change="bindPosschange" style="width: 100%;" :disabled="user.id!=0">
					<view class="picker" style="display: flex;width: 100%;justify-content: space-between;">
						<text class="title">员工职位</text>
						<text class="content">{{ user.position.name || '请选择职位' }} <text class="iconfont iconxia" style="font-size: 14px;"></text></text>
					</view>
				</picker>
			</view>
			<view class="item">
				<view class="title">联系电话</view>
				<input type="text" v-model="user.phone" class="content" placeholder="请输入联系电话" :disabled="user.id!=0"/>
			</view>
			<view class="item">
				<view class="title">邮箱地址</view>
				<input type="text" v-model="user.email" class="content" placeholder="请输入邮箱地址" :disabled="user.id!=0"/>
			</view>		
			<view class="item">
				<text class="title">性　别</text>
				<radio-group @change="handleGenderChange" style="width: 70%;" :disabled="user.id!=0">
					<label class="gender-item" v-for="(item, index) in genders" :key="index">
						<radio class="gender-item-radio" :color="themeColor.color" :value="item.value" :checked="item.value === user.gender" />
						<text class="gender-item-text">{{ item.name }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item">
				<view class="section" style="width: 100%;">
				  <picker mode="date" :value="user.birthday" start="1990-01-01" end="2030-12-31" @change="bindDateChange" style="width: 100%;" :disabled="user.id!=0">
				    <view class="picker" style="display: flex;width: 100%;justify-content: space-between;">
						<view class="title">出生日期</view>
						<view class="content">{{user.birthday}}</view>
					</view>
				  </picker>
				</view>
			</view>
			<view class="item">
				<picker mode="selector" :range="nations" :range-key="'name'" :value="nations[rangekey3].name" @change="bindNationschange" style="width: 100%;" :disabled="user.id!=0">
					<view class="picker" style="display: flex;width: 100%;justify-content: space-between;">
						<text class="title">民族</text>
						<text class="content">{{ user.nation.name || '请选择民族' }} <text class="iconfont iconxia" style="font-size: 14px;"></text></text>
				    </view>
				</picker>
			</view>
			
			<view class="item">
				<view class="title">联系地址</view>
				<input type="text" v-model="user.address" class="content" placeholder="请输入联系地址" :disabled="user.id!=0"/>
			</view>
		</view>
		<button
			class="confirm-btn btn1"
			:class="'bg-' + themeColor.name"
			:disabled="btnLoading"
			:loading="btnLoading"
			@click="addSchedule()"
			v-if="!user.id"
		>
			新增员工
		</button>
		<button
			class="confirm-btn btn1"
			:class="'bg-' + themeColor.name"
			:disabled="btnLoading"
			:loading="btnLoading"
			@click="delSchedule()"
			v-if="user.id"
		>
			删除员工
		</button>
		
		
	</view>
</template>

<script>
  export default {
	data() {
		return {
			user: {
				id: 0,
				name: '',
				gender: '',
				birthday: '',
				nationId: 0,
				nation: {
					id: 0,
					name: ''
				},
				email: '',
				phone: '',
				address: '',
				departmentId: 0,
				department: {
					id: 0,
					name: ''
				},
				posId: 0,
				position: {
					id: 0,
					name: ''
				},
				header: ''
			},
			rangekey: 0, // 部门选择器下标
			rangekey2: 0, // 职位选择器下标
			rangekey3: 0, // 民族选择器下标
			deps: [], // 获取的部门数组
			positions: [], // 获取的职位数组
			nations: [], // 获取的民族数组
			genders: [
				{
					value: '男',
					name: '男'
				},
				{
					value: '女',
					name: '女'
				}
			],
			worksType:["资产报修","日常报修","车辆报修","工程报修"],
			mtype:'',
			mtypeValue: ''
		}
	},
	// 加载后将父页面传来的值赋给user
	onLoad:function(option){
		if(option!={}) {
			this.user = JSON.parse(option.user);
		}
	},
	onShow() {
		this.getChoosedata();
	},
	methods:{
		// 删除员工
		delSchedule() {
			var that = this;
			const headers = {
				authentication: wx.getStorageSync('tokenStr')
			};
			wx.request({
				url: `http://121.36.218.32:9887/clouddocument/admin/emp/${that.user.id}`,
				method: 'DELETE',
				header: headers,
				success(resp) {
					that.$mHelper.toast('员工删除成功');
					wx.navigateBack({
						url: '/pages/works/index'
					})
				}
			})
		},
		// 新增员工
		addSchedule() {
			if(this.user.name&&this.user.departmentId&&this.user.posId&&this.user.phone&&this.user.email&&this.user.gender&&this.user.birthday&&this.user.nationId){
				var email = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
				var phone = /^1[34578]\d{9}$/;
				if(phone.test(this.user.phone)){
					if(email.test(this.user.email)){
						var that = this;
						const headers = {
							authentication: wx.getStorageSync('tokenStr')
						};
						console.log(this.user);
						wx.request({
							url: 'http://121.36.218.32:9887/clouddocument/admin/emp',
							method: 'POST',
							header: headers,
							data: this.user,
							success(resp) {
								that.$mHelper.toast('员工新增成功');
								wx.navigateBack({
									url: '/pages/works/index'
								})
							}
						})
					}else{
						this.$mHelper.toast('请填写正确的邮箱');
					}
				}else{
					this.$mHelper.toast('请填写11位的正确电话号码');
				}
			}else{
				this.$mHelper.toast('请填写完基础信息');
			}
		},
		// 选择出生日期
		bindDateChange: function(e) {
		    // console.log('picker发送选择改变，携带值为', e.detail.value);
		    this.user.birthday = e.detail.value
		  },
		// 监听性别更改
		handleGenderChange(e) {
			this.user.gender = e.detail.value;
		},
		// 部门下拉框
		bindDepschange(e) {
			this.rangekey = e.detail.value;
			this.user.department.name = this.deps[e.detail.value].name;
			this.user.departmentId = this.deps[e.detail.value].id;
		},
		// 员工职务下拉框
		bindPosschange(e) {
			this.rangekey2 = e.detail.value;
			this.user.position.name = this.positions[e.detail.value].name;
			this.user.posId = this.positions[e.detail.value].id;
		},
		// 民族下拉框
		bindNationschange(e) {
			this.rangekey3 = e.detail.value;
			this.user.nation.name = this.nations[e.detail.value].name;
			this.user.nationId = this.nations[e.detail.value].id;
		},
		// 获取部门、职位、民族等数据
		getChoosedata() {
			var that = this;
			const headers = {
				authentication: wx.getStorageSync('tokenStr')
			};
			// 部门
			if(wx.setStorageSync('deps')){
				this.deps = JSON.parse(wx.getStorageSync('deps'));
			} else {
				wx.request({
					url: 'http://121.36.218.32:9887/clouddocument/admin/deps',
					method: 'GET',
					header: headers,
					success(resp) {
						that.deps = resp.data.data;
						wx.setStorageSync('deps', JSON.stringify(resp.data.data));
					}
				})
			};
			// 职位
			if(wx.setStorageSync('positions')){
				this.positions = JSON.parse(wx.getStorageSync('positions'));
			} else {
				wx.request({
					url: 'http://121.36.218.32:9887/clouddocument/sys/allPos',
					method: 'GET',
					header: headers,
					success(resp) {
						that.positions = resp.data.data;
						wx.setStorageSync('positions', JSON.stringify(resp.data.data));
					}
				})
			};
			// 民族
			if(wx.setStorageSync('nations')){
				this.nations = JSON.parse(wx.getStorageSync('nations'));
			} else {
				wx.request({
					url: 'http://121.36.218.32:9887/clouddocument/sys/nations',
					method: 'GET',
					header: headers,
					success(resp) {
						that.nations = resp.data.data;
						wx.setStorageSync('nations', JSON.stringify(resp.data.data));
					}
				})
			}
		}
	}
  }
</script>

<style lang="scss">
	/* 大背景*/
	.phonebookdetails {
	  width: 100%;
	  height: 1180rpx;
	  background-color: #F4F4F4;
	}
	.proDetail {
	  width: 100%;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  
	  .user-section {
	  	display: flex;
	  	align-items: center;
	  	justify-content: center;
	  	height: 320upx;
	  	padding: 40upx 30upx 0;
	  	overflow: hidden;
	  	position: relative;
		
		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100vw;
			opacity: 0.84;
		}
		.portrait-box {
			clear: both;
			z-index: 2;
			.portrait {
				position: relative;
				width: 200upx;
				height: 200upx;
				border-radius: 50%;
				border: 6upx solid #fff;
			}
		}
		
	  }
	  
	  .header {
		  width: 100%;
		  height: 200rpx;
		  background-color: #FFFFFF;
	  }
	  .item {
		width: 90%;
		padding: 15rpx 20rpx;
		display: flex;
		justify-content: space-between;
		margin: 10rpx auto;
		background-color: #FFFFFF;
		border: 1rpx solid #FFFFFF;
		border-radius: 10rpx;
		.title {
		  width: 20%;
		  font-size: 30rpx;
		  text-align: right;
		}
		.content {
		  width: 70%;
		  font-size: 30rpx;
		  text-align: left;
		}
		
		.gender-item {
			margin-right: 20upx;
		
			.gender-item-text {
				padding-left: 10upx;
			}
		
			radio .wx-radio-input.wx-radio-input-checked {
				background: $uni-color-primary;
				border-color: $uni-color-primary;
			}
		}
	  }
	}
	.btn1 {
		margin-top: 20rpx !important;
		margin-bottom: 20rpx !important;
	}
</style>
